<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'我的错题库'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<scroll-view class="selectList" scroll-y="true" @scrolltolower="nextPage" lower-threshold="10">
					<view class="classifySelect">
						<view class="singleClassify ":class="params.is_master==='' ? 'activeClassify' :''"  @tap="changeStatus('')">
							全部
						</view>
						<view class="singleClassify" :class="params.is_master==='1'?'activeClassify':''" @tap="changeStatus('1')">
							已掌握
						</view>
						<view class="singleClassify" :class="params.is_master==='0'?'activeClassify':''" @tap="changeStatus('0')">
							未掌握
						</view>
					</view>
					<view class="typeMain">
						<view class="singleTopic" v-for="(item,index) in pageList" :key="index" @tap="jumpToMain(item)">
							<view class="topicTit">
								<van-tag color="#E70012" custom-style="">{{item.question_type==1?'单选':item.question_type==2?'多选':'判断'}}</van-tag>
								<text class="quest" style="margin-left:20rpx;">{{item.stem}}？</text>
							</view>
							<view class="topicInfo">
								<view class="taskName">
									<image src="@/static/images/icon/edit.png" mode="widthFix" style="width:22rpx;">
									</image>
									<text style="margin-left:8rpx">{{item.title}}</text>
								</view>
								<view class="status">
									<image src="@/static/images/beenGet.png" mode="widthFix"
										style="width:75rpx;height:55rpx" v-if="item.is_master"></image>
										<image src="@/static/images/dontGet.png" mode="widthFix"
											style="width:75rpx;height:55rpx" v-else></image>
								</view>
							</view>
						</view>
					<!-- 	<view class="singleTopic">
							<view class="topicTit">
								<van-tag color="#E70012" custom-style="">单选</van-tag>
								<text class="quest" style="margin-left:20rpx;">以下哪一项不是消防安全四个能力的内容？</text>
							</view>
							<view class="topicInfo">
								<view class="taskName">
									<image src="@/static/images/icon/edit.png" mode="widthFix" style="width:22rpx;">
									</image>
									<text style="margin-left:8rpx">中级消防监控理论</text>
								</view>
								<view class="status">
									<image src="@/static/images/beenGet.png" mode="widthFix"
										style="width:75rpx;height:55rpx"></image>
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</template>

	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {userWrongBank} from '@/globalApi/requestApi.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
				params:{
					is_master:'',
					limit:10,
					page:1
				},
				pageList:[]
			}
		},
		onLoad() {},
		onShow() {
			this.params.page=1
			this.pageList = []
			this.initPage()
		},
		methods: {
			initPage(){
				var res = this.getPage().then(res=>{
					if(res.code==200){
						if(res.data.length==0){
							uni.showToast({
								title:'暂无更多数据',
								icon:'none'
							})
							return
						}
						if(res.data.length>0){
							this.pageList = [...this.pageList,...res.data]
							
						}
					}
					
				})
			},
			async getPage(){
				var res = await userWrongBank(this.params)
				return res
			},
			nextPage(){
				this.params.page+=1
				this.initPage()
			},
			changeStatus(type){
				this.params.is_master = type
				this.params.page=1
				this.pageList = []
				this.initPage()
			},
			jumpToMain(item){
				uni.navigateTo({
					url:'../errorTask/errorTask?data='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		overflow: hidden;
		.selectList{
			height:100%;
		}
		.classifySelect {
			width: 100%;
			padding: 23rpx 120rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;

			.activeClassify {
				color: #E70012
			}
		}

		.typeMain {
			width: 100%;
			margin-top: 15rpx;
			padding: 35rpx 30rpx;
			box-sizing: border-box;

			.singleTopic {
				width: 100%;
				padding: 35rpx 45rpx;
				background: #fff;
				box-sizing: border-box;
				margin-bottom: 15rpx;

				.topicInfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.quest {
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #222222;
					}
				}
			}

		}
	}
</style>